<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="车辆VIN码">
        <el-input v-model="carInfo.vin" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="carInfo.carNo" />
      </el-form-item>
      <el-form-item label="汽车类型">
        <el-input v-model="carInfo.carType" />
      </el-form-item>
      <el-form-item label="车主">
        <el-input v-model="carInfo.carMaster" />
      </el-form-item>
      <el-form-item label="图片">
        <!-- <el-input v-model="carInfo.carPic" /> -->
        <template>
          <el-upload
            :action="BASE_API+'/admin/carInfo/uploadPic'"
            list-type="picture-card"
            :file-list="fileArr"
            :limit="1"
            :on-success="handleAvatarSuccess"
            name="file"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              限制上传一张, 只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </template>
      </el-form-item>
      <el-form-item label="公里数">
        <el-input v-model="carInfo.carMilage" />
      </el-form-item>
      <el-form-item label="保险起始日期">
        <el-date-picker
          v-model="carInfo.insuranceStartTime"
          type="date"
          placeholder="保险开始日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-date-picker
          v-model="carInfo.insuranceEndTime"
          type="date"
          placeholder="保险结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="保险公司">
        <el-input v-model="carInfo.insuranceCompany" />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import carInfoApi from '@/api/CarInfo'
export default {
  data() {
    return {
      carInfo: {}, // 初始化数据
      saveBtnDisabled: false, // 保存按钮是否禁用，防止表单重复提交
      icon_url: '', // 默认url
      BASE_API:process.env.VUE_APP_BASE_API
    }
  },
  computed: {
    fileArr() {
      // 上传图片 显示默认图片
      return this.icon_url ? [{ url: this.icon_url }] : []
    }
  },
  //页面渲染成功
  created() {
    if (this.$route.params.id) {
      this.fetchDataById(this.$route.params.id)
    }
  },
  methods: {
    saveOrUpdate() {
      // 禁用保存按钮
      this.saveBtnDisabled = true
      if (!this.carInfo.id) {
        this.saveData()
      } else {
        this.updateData()
      }
    },
    // 新增数据
    saveData() {
      // debugger
      carInfoApi.save(this.carInfo).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push('/CarInfo/list')
      })
    },
    // 根据id查询记录
    fetchDataById(id) {
      carInfoApi.getById(id).then(response => {
        this.carInfo = response.data.record
      })
    },
    // 根据id更新记录
    updateData() {
      // 数据的获取
      carInfoApi.updateById(this.carInfo).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push('/CarInfo/list')
      })
    },
    //图片上传成功
    handleAvatarSuccess(res, file) {
      this.icon_url = res.data.icon_url
      //赋值给po 图片属性 表单提交时获得图片路径
      this.carInfo.carPic = res.data.icon_url
    }
  }
}
</script>
